
import React from 'react';
import { Icon } from 'weaver-mobile';
import { getLabel } from '../../util/common';

export default class WfChooseItem extends React.Component {
    render(){
        const { domKey="",className="",realValue="",showValue,viewAttr,placeholder=getLabel(18214,"请选择"), isShowRightIcon=true} = this.props;
        const isNull = realValue === "";
        const isHolder = viewAttr>1 && isNull;
        const swapClassName= `wf-choose-item ${className} ${viewAttr === 1 ? "wf-choose-item-view" : "wf-choose-item-edit"}`;
        return (
            [<div className={swapClassName} onClick={this.props.onClick}>
                {
                    isHolder && isShowRightIcon && <div className="wf-choose-item-holder">{placeholder}</div>
                }
                {
                    !isHolder && <div className="wf-choose-item-content">{showValue}</div>
                }
                {
                    viewAttr === 3 && isNull && <div className="wf-choose-item-required">
                        <img src="/images/BacoError_wev9.png" align="absmiddle" />
                    </div>
                }
                {
                    viewAttr > 1 && isShowRightIcon && <div className="wf-choose-item-right">
                        <Icon type="right" />
                    </div>
                }
                {
                    !!domKey && <input type="hidden" id={domKey} name={domKey} value={realValue} />
                }
            </div>, this.props.extraElement]
        )
    }
}